<template>
  <div id="middle-quarter-card">
    <div class="top-pane">
      <div class="order-box" v-for="(item,index) in quarter" :key="index">
        <span class="num num-order"><countTo :startVal="0" :endVal="Number(item.order_total)" :duration="500"></countTo></span>
        <span class="num-name">订单笔数</span>
      </div>
    </div>
    <div class="bottom-pane">
      <div class="quarter-box" v-for="(item,index) in quarter" :key="index">
        <div class="quarter-detail">
          <span class="num">{{item.growth_rate}}%</span>
          <span class="num-name">第{{item.quarter}}季度增长率</span>
          <img src="https://mini-app-img-1251768088.cos.ap-guangzhou.myqcloud.com/plugin/new-blind-box/large_order3.png" alt="">
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import countTo from "vue-count-to";
export default {
  data() {
    return {};
  },
  props: {
    quarter: {
      type: null,
      default: () => []
    },
  },
  mounted() {
  },
  methods: {},
  components: { countTo }
};
</script>

<style lang="scss" rel="stylesheet/scss" scoped>
#middle-quarter-card {
  display: flex;
  flex-direction: column;
  justify-content: space-between;

  .num {
    color: #02d9fd;
    line-height: 1;
    margin-bottom: 0.5vh;
    font-size: 1rem;
  }

  .num-order {
    margin-bottom: 1vh;
  }

  .num-name {
    line-height: 1;
    margin: 0 0.5vw;
    font-size: 0.5rem;
  }

  .top-pane {
    display: flex;
    justify-content: space-evenly;
    height: 45%;

    .order-box {
      display: flex;
      flex-direction: column;
      border-radius: 5px;
      justify-content: center;
      align-items: center;
      background: url('https://mini-app-img-1251768088.cos.ap-guangzhou.myqcloud.com/plugin/new-blind-box/large_order.png') no-repeat;
      background-size: 100% 100%;
      width: 13vh;
      // height: 13vh;
    }
  }

  .bottom-pane {
    display: flex;
    justify-content: space-evenly;
    font-size: 0.5rem;
    height: 45%;

    img {
      margin: 0 auto !important;
      width: 4vw;
      height: 2.8vh;
    }

    .quarter-box {
      // display: flex;
      // flex-direction: column;
      border-radius: 5px;
      // justify-content: center;
      // align-items: center;
      // padding-top: 4vh;
      background: url('https://mini-app-img-1251768088.cos.ap-guangzhou.myqcloud.com/plugin/new-blind-box/large_order2.png') no-repeat;
      background-size: 100% 100%;
      position: relative;

      .quarter-detail {
        display: flex;
        flex-direction: column;
        position: absolute;
        left: 0;
        right: 0;
        top: 34%;
        bottom: 0;
        margin: auto;
      }

      width: 13vh;
      // height: 13vh;
    }
  }
}
</style>
